<script setup>
import { goCommunity, gomanage } from "../../tools/go";

const jiatinglist = [
  { id: 1, name: '姓名:', type: 'text' },
  { id: 2, name: '身份证:', type: 'text' },
  { id: 3, name: '性别:', type: 'select', options: ['男', '女'] },
  { id: 4, name: '电话:', type: 'tel' },
  { id: 5, name: '民族:', type: 'select', options: ['汉族', '回族', '壮族', '其他'] },
  { id: 6, name: '户籍所在地:', type: 'text' },
  { id: 7, name: '出生日期:', type: 'date' },
  { id: 8, name: '现居地:', type: 'text' },
  { id: 9, name: '小区名称:', type: 'select', options: ['小区A', '小区B', '小区C'] },
  { id: 10, name: '楼栋:', type: 'text' },
  { id: 11, name: '与户主关系:', type: 'select', options: ['户主本人', '父亲', '母亲', '配偶', '子女'] },
  { id: 12, name: '职业:', type: 'text' },
  { id: 13, name: '血型:', type: 'select', options: ['A型血', 'B型血', 'O型血', 'AB型血'] },
  { id: 14, name: '文化程度:', type: 'text' },
  { id: 15, name: '政治面貌:', type: 'text' },
  { id: 16, name: '户口类型:', type: 'text' }
];

const submitForm = () => {
  console.log('Form submitted:', jiatinglist);
};
</script>

<template>
  <view class="titli">
    <v-icon @click="gomanage()" class="icon" icon="mdi-chevron-left"></v-icon>
    <h3>添加家庭成员信息</h3>
  </view>

  <ul class="nav">
    <li v-for="(item, index) in jiatinglist" :key="item.id">
      <view class="t">
        <view class="box">
          <text>{{ item.name }}</text>
        </view>
        <input v-if="item.type === 'text' || item.type === 'tel' || item.type === 'date'" :type="item.type" placeholder="请输入">
        <select v-if="item.type === 'select'">
          <option v-for="(option, idx) in item.options" :key="idx">{{ option }}</option>
        </select>
      </view>
    </li>
  </ul>

  <button @click="submitForm" class="submit-button">添加</button>
</template>

<style scoped lang="scss">
.nav {
  li {
    .t {
      input, select {
        margin-left: 12px;
        height: 35px;
        border: 1px solid #000000;
        padding: 0 8px;
        width: 60%;
        box-sizing: border-box;
      }
      .box {
        text {
          height: 50px;
          line-height: 50px;
        }
        width: 30%;
        height: 50px;
        border-right: 1px solid #000000;
        display: flex;
        padding: 0 8px;
        justify-content: flex-end;
      }
      width: 100%;
      height: 50px;
      display: flex;
      align-items: center;
      justify-content: flex-start;
    }
    display: flex;
    width: 100%;
    border-top: 1px solid #000000;
  }
  display: flex;
  width: 100%;
  flex-direction: column;
}

.submit-button {
  width: 100%;
  padding: 10px;
  background-color: #007bff;
  color: white;
  border: none;
  cursor: pointer;
  margin-top: 20px;

  &:hover {
    background-color: #0056b3;
  }
}

@import "../../static/css/title/index.css";
</style>
